<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Struts2 首頁</title>
        <script src="/MyStruts2/scripts/jquery-1.11.0.min.js"></script>
        <style type="text/css">
	#abgne-block-20120527 {
		width: 400px;	/* 圖片的寬 */
		height: 300px;	/* 圖片的高 */
		overflow: hidden;
	}
	#abgne-block-20120527 a {
		position: absolute;
		top: 0; 
		left: 0;
	}
	#abgne-block-20120527 a img {
		border: none;
	}

	/* 以下是針對選單按鈕設定 */
	#abgne-block-20120527 .abgne-controls {
		list-style: none; 
		position: absolute;
		margin: 0;
		padding: 0;
		left: 30px;
		bottom: 40px;
		height: 20px;
	}
	#abgne-block-20120527 .abgne-controls li {
		float: left;
		width: 35px;
		height: 35px;
		line-height: 35px;
		font-size: 20px;
		font-weight: 900;
		text-align: center;
		cursor: pointer;
		margin-right: 2px;
		color: #0cf;
		background-color: #fff;
	}
	#abgne-block-20120527 .abgne-controls li.current { 
		color: #fff;
		background-color: #0cf;
	}
        </style>
        <script type="text/javascript">
                $(function(){
                        // 先取得 #abgne-block-20120527 及其相關區塊及元素
                        // 並依計算出每等份的寬度
                        var _slices = 9,	// 切成幾等份
                                _index = 0,		// 預設顯示第幾個
                                _zIndex = 999, 
                                $block = $('#abgne-block-20120527').css('position', 'relative'), 
                                $slides = $block.find('a').css('z-index', _zIndex).hide(), 
                                _width = $block.width(), 
                                _height = $block.height(), 
                                _sliceWidth = _width / _slices,	// 每等份的寬度
                                _lastSliceWidth = _sliceWidth + (_width - _sliceWidth * _slices),	// 剩於的寬度
                                _img = $slides.eq(_index).show().find('img').attr('src'), 
                                timer, 
                                speed = 2000,	// 輪播速度
                                _animateSpeed = 600,	// 動畫速度
                                _isHover = false,	// 滑鼠是否移到 $block 上
                                _isComplete = true;	// 動畫是否已全部執行完

                        // 依 _slices 數量來產生相對應的 div 區塊
                        var _sliceDiv = '', _control = '';
                        for(var i=0;i<_slices;i++){
                                var _w = i == _slices - 1 ? _lastSliceWidth : _sliceWidth, _l = i * _sliceWidth;
                                _sliceDiv += '<div class="abgne-slice slide-' + i + '" style="left:' + _l + 'px;top:0;width:' + _w + 'px;height:100%;background-image:url(' + _img + ');background-position:-' + _l + 'px 0;position:absolute;background-repeat:no-repeat;"></div>';
                        }

                        // 依 $slides 數量來產生按鈕
                        for(var i=0;i<$slides.length;i++){
                                _control += '<li class="abgne-control control-' + (i + 1) + '">' + (i + 1) + '</li>';
                        }

                        // 分別把 div 區塊及按鈕加入到 $block 中
                        var $abgneSlides = $block.append(_sliceDiv, '<ul class="abgne-controls">' + _control + '</ul>').find('.abgne-slice'), 
                                $abgneControls = $block.find('.abgne-controls').css('z-index', _zIndex + 2).find('li').eq(_index).addClass('current').end();

                        // 當點擊到 .abgne-controls li 時
                        $abgneControls.click(function(){
                                // 若動畫未完成前不接受其它新的事件
                                if(!_isComplete) return;

                                var $this = $(this), 
                                        $slide = $slides.eq($this.index()), 
                                        _completeTotal = 0;

                                // 若現在顯示的跟點擊到的是同一個時, 就不處理
                                if($this.hasClass('current')) return;

                                // 幫點擊到的 li 加上 .current, 並移除上一個 .current 
                                $this.addClass('current').siblings('.current').removeClass('current');
                                _isComplete = false;
                                _index = $this.index();

                                // 取得相對應的圖片的路徑
                                _img = $slide.find('img').attr('src');
                                // 先讓每一個區塊的背景圖片為剛剛取得的圖片
                                // 並進行動畫
                                $abgneSlides.each(function(i){
                                        var $ele = $(this);
                                        $ele.css({
                                                top: i % 2 == 0 ? _height : -_height,
                                                opacity: 0, 
                                                zIndex: _zIndex + 1, 
                                                backgroundImage: 'url(' + _img + ')'
                                        }).stop().animate({
                                                top: 0, 
                                                opacity: 1
                                        }, _animateSpeed, function(){
                                                $ele.css('zIndex', _zIndex - 1);
                                                if(i == _slices - 1){
                                                        $block.css('background-image', 'url(' + _img + ')');
                                                        $slide.show().siblings('a:visible').hide();
                                                        _isComplete = true;
                                                        // 當動畫完成且滑鼠沒有移到 $block 上時, 再啟動計時器
                                                        if(!_isHover)timer = setTimeout(auto, speed);
                                                }
                                        });
                                });
                        });

                        $block.hover(function(){
                                // 當滑鼠移入 $block 時停止計時器
                                _isHover = true;
                                clearTimeout(timer);
                        }, function(){
                                // 當滑鼠移出 $block 時啟動計時器
                                _isHover = false;
                                timer = setTimeout(auto, speed);
                        });

                        // 自動輪播使用
                        function auto(){
                                _index = (_index + 1) % $slides.length;
                                $abgneControls.eq(_index).click();
                        }

                        // 啟動計時器
                        timer = setTimeout(auto, speed);
                });
        </script>
        
        
    </head>
    <body>
        <h1>Struts2 首頁</h1>
        <h2>您是第&nbsp;${visitCount}&nbsp;位光臨本站的訪客</h2>
        <p>&nbsp;</p>        
        <div id="abgne-block-20120527">
		<a href="#"><img src="/playdoll/images/room1.jpg" /></a>
		<a href="#"><img src="/playdoll/images/room2.jpg" /></a>
		<a href="#"><img src="/playdoll/images/room3.jpg" /></a>
		<a href="#"><img src="/playdoll/images/room4.jpg" /></a>
		<a href="#"><img src="/playdoll/images/room5.jpg" /></a>
	</div>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><a href="/playdoll/login">會員登入</a></p>        
        <p>&nbsp;</p>
        <p><a href="/playdoll/admin">管理員專區</a></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    </body>
</html>
